<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>浙江日报报卡激活</title>
<link href="/Public/css/zjcard/zjdailycard.css" type="text/css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link href="/Public/css/bootstrap/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<script src="/Public/js/user/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!--<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
<script src="/Public/js/user/bootstrap.min.js"></script>
<link href="/Public/css/zjcard/common.css" type="text/css" rel="stylesheet" />
</head>

<body style="background-color:#f7f7f9">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="bannerTop" style="margin-left:-400px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="jumbotron margin-vertical">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="alert alert-success" role="alert" style="visibility:hidden">保存成功</div>
                        <div class="alert alert-danger" role="alert" hidden>保存失败</div>
                    </div>
                </div>
                <div class="row">
                    <form name="customerAddr" action="{:U('Wap/CustomerAddr/save')}" method="POST" id="customerAddr">
                        <div class="form-group">
                            <input class="form-control" name="username" placeholder="姓名"/>
                        </div>
                        <div class="form-group">
                            <input class="form-control" name="telephone" placeholder="电话号码" />
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" name="address" placeholder="详细地址"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-md-offset-8">
            <a type="button" class="btn btn-primary pull-right" href="{:U('Wap/CustomerAddr/index')}">返回</a>
        </div>
        <div class="col-md-1">
            <button type="submit" form="customerAddr" class="btn btn-primary pull-right">保存</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
/*var successCallback = function(){
};
var failCallback = function(){
};*/
var customerAddrForm = {
    selector: "form[name='customerAddr']",
    reset: function(){
    },
    submit: function( successCallback, failCallback ){
        var formData = {};
        $( this.selector ).find( "input" ).each( function(){
            formData[$(this).attr("name")] = $(this).val();
        } );
        $( this.selector ).find( "textarea" ).each( function(){
            formData[$(this).attr("name")] = $(this).val();
        } );
        $.ajax( {
            url: $( this.selector ).attr( "action" ),
            type: $( this.selector ).attr( "method" ),
            data: formData,
            success: function( result ){
                if( result.err === 200 ){
                    successCallback && successCallback();
                }else{
                    failCallback && failCallback();
                }
            },
            error: function(){
                failCallback && failCallback();
            }
        } );
    }
} 
$( customerAddrForm.selector ).unbind( "submit" ).bind( "submit", function( event ){
    event.preventDefault();
    customerAddrForm.submit( function(){
            $( ".alert" ).removeClass("alert-danger").addClass( "alert-success" ).html("保存成功").css( "visibility", "visible" );
            setTimeout( function(){
                $( ".alert" ).css( "visibility", "hidden" );
            }, 800*2 )
        }, function(){
            $( ".alert" ).removeClass("alert-success").addClass( "alert-danger" ).html("保存失败").css( "visibility", "visible" );
            setTimeout( function(){
                $( ".alert" ).css( "visibility", "hidden" );
            }, 800*2 );
        } );
}); 
</script>
</html>
